<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>交大体检系统</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-tab-title
        .layui-this{background-color: #e9eaee;color: #6a79d6;}
        .first-tab i.layui-tab-close{display:none !important;}
        .layui-layout-admin .layui-header{background-color: #6A79D6 !important;}
        .layui-layout-admin
        .layui-logo{background-color: #6a79d6;color: #fcf7f7}
        .layuimini-color .color-title{padding:10px 0 10px 20px;border-bottom:1px solid #d9dada;margin-bottom:8px;}
        .layuimini-color .color-content{padding:0 5px 0 5px;}.layuimini-color .color-content ul{list-style:none;text-align:center;}
        .layuimini-color .color-content ul li{position:relative;display:inline-block;vertical-align:top;width:80px;height:50px;margin:0 15px 15px 0;padding:2px 2px 4px 2px;background-color:#f2f2f2;cursor:pointer;font-size:12px;color:#666;}
        .layuimini-color .color-content li.layui-this:after,.layuimini-color .color-content li:hover:after{width:100%;height:100%;padding:4px;top:-5px;left:-5px;border-color:#d8d8d8;opacity:1;}.layuimini-color .color-content li:after{content:'';position:absolute;z-index:20;top:50%;left:50%;width:1px;height:0;border:1px solid #f2f2f2;transition:all .3s;-webkit-transition:all .3s;opacity:0;}
        .layuimini-tool-left {position:absolute!important;top:0;left:200px;width:60px;height:100%;line-height:60px;text-align:center;color:#ffffff!important;}
        .closeBox {height:35px !important;}
        .closeBox > li {line-height:35px !important;}
        .closeBox {position:absolute;right: -10px;top: 16px;background-color:#fff !important;color:#000;border-bottom:1px solid #e2e2e2;padding:0 10px !important;}
        .closeBox .layui-nav-item {line-height:40px;}
        .closeBox .layui-nav-item > a,.closeBox .layui-nav-item > a:hover {color: #fdf8f8;}
        .closeBox .layui-nav-child {top:40px;}
    </style>
    <style id="layuimini-bg-color">
    </style>
</head>
<!--参考 layui 后台布局-->
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin" >
    <div class="layui-header" >
        <div class="layui-logo">体检医院系统</div>

        <a>
            <div class="layuimini-tool-left"  onclick="iconHide()"><i class="icon-color layui-icon layui-icon-shrink-right" style="color:white" id="hide"></i></div>
        </a>

        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item" lay-unselect>
                <a href="javascript:" data-refresh="刷新"><i class="layui-icon layui-icon-refresh"></i></a>
            </li>
            <li class="layui-nav-item " lay-unselect>
                <a href="javascript:" data-check-screen="full"><i class="layui-icon layui-icon-screen-full"></i></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">
                    <div><span id="nickName">guest</span></div>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:" data-id="userProper" data-title="基本资料" data-url="/index/users/info"
                           class="menuNvaBar">基本资料</a></dd>
                    <dd><a href="javascript:" data-id="userSafe" data-title="安全设置" data-url="/index/users/password"
                           class="menuNvaBar">更换密码</a></dd>
                    <dd><a href="javascript:" id="logout">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layuimini-select-bgcolor mobile layui-hide-xs" lay-unselect>
                <a href="javascript:;" data-bgcolor="配色方案"><i class="layui-icon layui-icon-more-vertical"></i></a>
            </li>
        </ul>
    </div>
    <!-- 左侧菜单-->
    <div id="mainmenu" class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div class="navBar layui-side-scroll" id="navBarId">

            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-filter="tab" lay-allowclose="true">
            <ul class="layui-tab-title" style="width: 90%">
                <li class="first-tab layui-this"><i class="layui-icon layui-icon-home"></i> <span>主页</span></li>
            </ul>
            <ul class="layui-nav closeBox">
                <li class="layui-nav-item">
                    <a href="javascript:;"> <i class="layui-icon layui-icon-circle-dot"></i> 页面操作</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-page-close="other"><i class="layui-icon layui-icon-close"></i> 关闭其他</a></dd>
                        <dd><a href="javascript:;" data-page-close="all"><i class="layui-icon layui-icon-close-fill"></i> 关闭全部</a></dd>
                    </dl>
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe th:src="@{/index/main}" frameborder="0" name="content" width="100%" id="home"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/home.js?v=0.1"></script>
<script>
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var form = layui.form;
    var element = layui.element;
    initBgColor();
    $(function () {
        FrameWH();
        //递归获取导航栏无线层级
        var getChild = function (item, ulHtml) {
            ulHtml += '<dl class="layui-nav-child">';
            $.each(item, function (index, child) {
                if (child.children != null && child.children.length > 0 && child.type == 1) {
                    ulHtml += '<dd><a>' + child.title + '</a>';
                    ulHtml += getChild(child.children, "");
                } else if (child.children != null && child.children.length > 0 && child.type != 1) {
                    ulHtml += '<a>' + child.title + '</a>';
                    ulHtml += getChild(child.children, "");
                } else {
                    if (child.target == "_blank") {
                        ulHtml += '<dd><a href="' + child.url + '" target="_blank">';
                    } else {
                        ulHtml += '<dd><a href="javascript:;" data-icon="' + child.icon + '" data-url="' + child.url + '" data-title="' + child.title + '" data-id="' + child.id + '" class="menuNvaBar">';
                    }
                    ulHtml += '<cite>' + child.title + '</cite></a></dd>';
                }
                if (child.children != null && child.children.length > 0 && child.type == 1) {
                    ulHtml += '</dd>';
                }

            });
            ulHtml += "</dl>"
            return ulHtml;
        };
        CoreUtil.sendGet("/sys/home/", null, function (res) {
            console.log(res.data.userInfo.username);
            $("#nickName").html(res.data.userInfo.username);
            var data = res.data.menus;
            if (data != "" && data.length > 0) {
                var ulHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav" onclick="ulHide()">';
                if (data != null && data.length > 0) {

                    $.each(data, function (index, item) {
                        if (index == 0) {
                            ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
                        } else {
                            ulHtml += '<li class="layui-nav-item">';
                        }
                        ulHtml += '<a href="javascript:;">';
                        if (!CoreUtil.isEmpty(item.icon)) {
                            ulHtml += '<i class="layui-icon '+item.icon+'"></i>';
                        }
                        ulHtml += '<cite> ' + item.title + '</cite>';
                        ulHtml += '</a>'
                        if (item.children != null && item.children.length > 0) {
                            ulHtml += '<dl class="layui-nav-child">';
                            $.each(item.children, function (index, child) {
                                if (child.children != null && child.children.length > 0 && child.type == 1) {
                                    ulHtml += '<dd><a>' + child.title + '</a>';
                                    ulHtml += getChild(child.children, "");
                                } else if (child.children != null && child.children.length > 0 && child.type != 1) {
                                    ulHtml += '<a>' + child.title + '</a>';
                                    ulHtml += getChild(child.children, "");
                                } else {
                                    if (child.target == "_blank") {
                                        ulHtml += '<dd><a href="' + child.url + '" target="_blank">';
                                    } else {
                                        ulHtml += '<dd><a href="javascript:;" data-icon="' + child.icon + '" data-url="' + child.url + '" data-title="' + child.title + '" data-id="' + child.id + '" class="menuNvaBar">';
                                    }
                                    if (!CoreUtil.isEmpty(child.icon)) {
                                        ulHtml += '<i class="layui-icon '+child.icon+'"></i>';
                                    }
                                    ulHtml += '<cite> ' + child.title + '</cite></a></dd>';
                                }

                                if (child.children != null && child.children.length > 0 && child.type == 1) {
                                    ulHtml += '</dd>';
                                }

                            });
                            ulHtml += "</dl>"
                        }
                        ulHtml += '</li>'
                    });
                }
                ulHtml += '</ul>';
                $(".navBar").append(ulHtml);
                element.init();  //初始化页面元素

            } else {
                $("#navBarId").empty();
            }

            top.layer.closeAll();
        });
        $(document).on('click', '.menuNvaBar', function () {
            var dataid = $(this);
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                if (CoreUtil.isEmpty(dataid.attr("data-icon"))){
                    var title = "<span>"+dataid.attr("data-title")+"</span>";
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                } else {
                    var title = "<span>"+dataid.attr("data-title")+"</span>";
                    title = '<i class="layui-icon '+dataid.attr("data-icon")+'"></i> ' + title;
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                }
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    if (CoreUtil.isEmpty(dataid.attr("data-icon"))){
                        var title = "<span>"+dataid.attr("data-title")+"</span>";
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                    } else {
                        var title = "<span>"+dataid.attr("data-title")+"</span>";
                        title = '<i class="layui-icon '+dataid.attr("data-icon")+'"></i> ' + title;
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                    }
                }
            }
            active.tabChange(dataid.attr("data-id"));
        });

        //推出登录
        $("#logout").click(function () {
            logoutDialog();
        });
    });
    //删除前确认对话框
    var logoutDialog = function () {
        layer.open({
            content: '确定要退出登录么？',
            yes: function (index, layero) {
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                CoreUtil.sendGet("/sys/user/logout", null, function (res) {
                    layui.data('LocalData', null);
                    top.window.location.href = "/login";
                });
            }
        });
    }
    //触发事件
    var active = {
        tabAdd: function (url, id, title) {
            if (url != "" && url != null && url != undefined) {
                element.tabAdd('tab', {
                    title: title
                    ,
                    content: '<iframe data-frameid="' + id + '" frameborder="0" name="content" width="100%" src="' + url + '"></iframe>'
                    ,
                    id: id
                })
            }
            FrameWH();//计算框架高度
        },
        tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('tab', id); //切换到：用户管理
            $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
        },
        tabDelete: function (id) {
            element.tabDelete("tab", id);//删除
        }
    };

    function FrameWH() {
        var h = $(window).height() - 41 - 10 - 35 - 10 - 44 - 10;
        $("iframe").css("height", h + "px");
    };

</script>

</html>